.footer {
  // padding: 118px 0 56px; - по макету
  padding: clamp(60px, 2.432rem + 6.59vw, 118px) 0 56px;
  background-color: var(--footer-bg);
  color: var(--footer-text-color);

}

.footer__grid {
  // Сетку грид прописываем на основе сетки макета (сколько столбцов занимает каждые блок)
  display: grid;
  grid-template-columns: 3fr 1fr 2fr 2fr 2fr;
  gap: 60px 20px;
  // margin-bottom: 118px;
  margin-bottom: clamp(60px, 2.432rem + 6.59vw, 118px);

  @include tablet {
    grid-template-columns: 4fr 1fr 3fr 3fr;
  }

  @include mobile {
    grid-template-columns: 1fr 1fr;
  }
}

.footer__desc {

  // Прописываем для того, чтобы при добавлении в блок еще одного абзаца, он располагался бы ниже на 1em
  p+p {
    margin-top: 1em;
  }

  // Прописываем чтобы блок занимал 2 колонки (с 1-й по 3-ю линии сетки)
  @include mobile {
    grid-column: 1 / 3;
  }
}

.footer__logo {
  margin-bottom: 29px;
}

.footer__text {
  font-weight: 500;
  font-size: 15px;
  line-height: 160%;
  // color: #fff;
}

.footer__nav {
  &--services {
    // Прописываем, что этот блок располагается с 3-ей grid-линии сетки (т. к. вторая фракция по макету должна быть пустая)
    grid-column-start: 3;
  }

  @include mobile {
    // Прописываем, чтобы он распологался автоматически там, где должен
    grid-column-start: auto;
  }
}

.footer__nav-title {
  font-family: var(--font-footer-accent);
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--footer-accent);
  margin-bottom: 20px;
}

.footer__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer__list-item a {
  font-size: 15px;
  line-height: 160%;
  color: var(--footer-text-color);
  transition: opacity 0.1s ease-in;

  &:hover {
    opacity: 0.6;
  }
}

.footer__row {
  display: flex;
  justify-content: space-between;
  align-items: center;

  @include mobile {
    // Прописываем, чтобы элементы располагались в колонку и перемещаем копирайт в конец
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 20px;
  }
}

.footer__copyright {
  font-family: var(--font-footer-accent);
  font-size: 15px;
  letter-spacing: -0.01em;
  color: #fff;
  opacity: 0.5;
}

.footer__links {
  display: flex;
  gap: 40px;

  @include mobile {
    gap: 20px;
    // Добавим для того, что если появится еще одна ссылка она перенеслась бы на новую строку
    flex-wrap: wrap;
  }
}

.footer__link {
  font-weight: 400;
  font-size: 15px;
  line-height: 160%;
  color: var(--footer-text-color);
  transition: opacity 0.1s ease-in;

  &:hover {
    opacity: 0.6;
  }
}